<template>
   <div class="p-smartwatch2" ref="psmartwatch" @mouseover="removeStyle">
        <div class="p-w1080">
          <div class="p-fl fl">
          <h2>Smart Watches</h2>
          <ul>
            <li v-for="(item,index) in all" :key="index" @mouseover="allsmartwatch1(item.id)">{{item.name}}&gt;</li>
          </ul>
         </div>
          <div class="p-navbox fr">
           <div class="p-active2" v-for="item2 in all2" :key="item2.id" >
                <a href="javascript:;" @click="allsmartwatch2(item2)">
                 <img :src="'http://www.kymid.com/testphp/public'+ item2.image" alt="">
                    <h3>{{item2.name_en}}</h3>
            </a>
            </div>
       </div>
        </div>
    </div>
</template>
<style scoped>
/* .p-smartwatch2{
    display: block !important;
} */
</style>
<style scoped src="@/assets/css/allsmartwatch2.css"></style>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()
const all = ref(null)
const all2 = ref(null)
const ids = ref(4)
onMounted(() => {
    data1()
    data2(4)
})
function data1 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/type_list?lang=en').then(val => {
    all.value = val.data.msg[1].children1
    // console.log(all.value)
})
}
function data2 (id) {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/good_type?product_id=' + id + '&offset=0limit=8').then(val => {
    all2.value = val.data.msg
    console.log(all2.value)
    })
}

function allsmartwatch1 (id) {
    // console.log(ids.value, id)
    if (ids.value !== id) {
        ids.value = id
        data2(id)
    }
}
function allsmartwatch2 (id) {
    // console.log(id)
    proxy.$store.commit('imgs', id)
    proxy.$router.push('/watch2/know2')
}
</script>
